/** @format */

import React from 'react';
import {login} from './index.styl';
import {admin as adminApi} from '@/api/admin';
import AlertDialog from '@/view/admin/component/dialog';

interface IProps {
  [propName: string]: any;
}

interface IUserInfo {
  user: string;
  pwd: string;
}

interface IAlertDialogState {
  open: boolean;
  // 默认 top
  vertical?: 'top' | 'bottom';
  // 默认 center
  horizontal?: 'left' | 'center' | 'right';
  // 默认 ''
  msg: string;
  // 默认 info
  severity?: 'error' | 'warning' | 'info' | 'success';
  // 多少秒后消失
  autoHideDuration?: number;
}

interface IState {
  userInfo: IUserInfo;
  alertDialogState: IAlertDialogState;
}

class Login extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      userInfo: {
        user: '',
        pwd: '',
      },
      alertDialogState: {
        msg: '',
        open: false,
      },
    };
    this.userInputChange = this.userInputChange.bind(this);
    this.pwdInputChange = this.pwdInputChange.bind(this);
    this.alertDialogClose = this.alertDialogClose.bind(this);
    this.submit = this.submit.bind(this);
  }

  componentDidMount() {
    localStorage.clear();
  }

  userInputChange(e: React.ChangeEvent<HTMLInputElement>) {
    const val: string = e.target.value;
    this.setState({
      userInfo: {
        ...this.state.userInfo,
        user: val,
      },
    });
  }

  pwdInputChange(e: React.ChangeEvent<HTMLInputElement>) {
    const val: string = e.target.value;
    this.setState({
      userInfo: {
        ...this.state.userInfo,
        pwd: val,
      },
    });
  }

  alertDialogClose() {
    this.setState({
      alertDialogState: {
        ...this.state.alertDialogState,
        open: false,
      },
    });
  }

  async submit() {
    if (!this.state.userInfo.user) {
      this.setState({
        alertDialogState: {
          ...this.state.alertDialogState,
          open: true,
          msg: '请填写用户名',
          severity: 'warning',
        },
      });
      return;
    }

    if (!this.state.userInfo.pwd.length) {
      this.setState({
        alertDialogState: {
          ...this.state.alertDialogState,
          open: true,
          msg: '请填写密码',
          severity: 'warning',
        },
      });
      return;
    }

    if (this.state.userInfo.pwd.length < 6) {
      this.setState({
        alertDialogState: {
          ...this.state.alertDialogState,
          open: true,
          msg: '密码长度必须6位以上',
          severity: 'warning',
        },
      });
      return;
    }

    const [resErr, resData]: any = await adminApi.login(this.state.userInfo);
    if (resErr) {
      this.setState({
        alertDialogState: {
          ...this.state.alertDialogState,
          open: true,
          msg: resErr.msg,
          severity: 'error',
        },
      });
      return;
    }

    localStorage.setItem('token', resData.token);
    this.props.history.replace('/');
  }
  //autocomplete="off"
  render(): JSX.Element {
    return (
      <div className={`${login}`}>
        <form>
          <h1>Login</h1>
          <input type="text" value={this.state.userInfo.user} placeholder="username" onChange={this.userInputChange} />
          <input
            type="password"
            value={this.state.userInfo.pwd}
            placeholder="password"
            onChange={this.pwdInputChange}
          />
          <button type="button" onClick={this.submit}>
            Login
          </button>
        </form>
        <AlertDialog {...this.state.alertDialogState} onClose={this.alertDialogClose} />
      </div>
    );
  }
}

export default Login;
